<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>login</title>
</head>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="./js/jquery-3.6.0.min.js"></script>
<style>
	* {
		margin: 0px;
		padding: 0px;
	}

	body {
		background-size: cover;
		background-repeat: no-repeat;
	}

	#loginbox {
		width: 35%;
		height: 300px;
		box-shadow: 0px 0px 3px 1px whitesmoke;
		border-radius: 5px;
		margin: 0 auto;
		margin-top: 18%;
	}

	.Masks {
		position: absolute;
		width: 35%;
		height: 300px;
		background-color: azure;
		opacity: 0.4;
		border-radius: 5px;
		z-index: 1;
	}

	.boxcontent {
		position: absolute;
		width: 35%;
		z-index: 2;
		padding-top: 25px;
		padding-left: 50px;
	}

	.inputText {
		width: 80%;
		height: 30px;
		margin-top: 10px;
		color: black;
		background-color: aliceblue;
		border: 0px;
		border-radius: 6px;
		text-align: 30px;
		text-indent: 15px;
	}

	input {
		border: 0px;
		outline: none;
	}
</style>
<body background="img/壁纸湖面.jpg">
<div id="loginbox">
	<div class="boxcontent" id="userlogin">
		<p style="font-weight:400; font-size: 22px;font-family:serif;">用户登录</p>
		<hr width="80%">
		<input id="acc" type="text" placeholder="账号" class="inputText" /><br>
		<input id="pwd" type="password" placeholder="密码" class="inputText" style="margin-bottom: 20px;"><br>
		<input id="memorypwd" type="checkbox"><span>记住密码</span> <a id="login_enrollbtn" href="#"
																	   style="color: black;margin-left: 50%">注册</a><br>
		<input id="login" type="submit" value="登录" class=" inputText">
	</div>
	<div class="boxcontent " id="enrollbox">
		<p style="font-weight:400; font-size: 22px;font-family:serif;">用户注册</p>
		<hr width="80%">
		<input id="enrollacc" type="text" placeholder="账号" class="inputText" /><br>
		<input id="enrollpwd" type="password" placeholder="密码" class="inputText"><br>
		<input id="trueEnrollpwd" type="password" placeholder="确认密码" class="inputText"
			   style="margin-bottom: 0px;"><br>

		<span style="font-size: 7px;">注：账号密码长度为6-12，账号不要使用中文</span>
		<button id="returnLogin" style="background-color: aliceblue;color: black;border: 0px;
						margin-top: 10px;width: 20%;border-radius: 4px; margin-left: 33%;" class="btn-info">返回登录</button>
		<input id="enrollBtn" type="submit" value="注册" class=" inputText">
	</div>
	<div class="Masks"></div>
</div>

</body>
<script>
	let userData;
	$("#enrollbox").hide();
	//注册
	$("#login_enrollbtn").click(function() {
		$("#userlogin").hide();
		$("#enrollbox").show();
	})

	$("#returnLogin").click(function(){
		$("#userlogin").show();
		$("#enrollbox").hide();
	})
	$("#enrollBtn").click(function() {
		var acc = $("#enrollacc").val()
		var pwd = $("#enrollpwd").val()
		var truepwd = $("#trueEnrollpwd").val()
		if (pwd == truepwd && acc.length >= 6 && acc.length <= 12 && pwd.length >= 6 && pwd.length <= 12) {
			console.log(acc,pwd)
			$.ajax({
				type: 'POST',
				url: 'http://localhost:8080/user/enroll',
				data: {
					'account': acc,
					'password': pwd,
				},
				dataType: 'JSON',
				success: function(data) {
					alert(data.msg);
					$("#enrollacc").val("")
					$("#enrollpwd").val("")
					$("#trueEnrollpwd").val("")
					$("#enrollbox").hide();
					$("#userlogin").show();
				},
				error: function(data) {
					alert("注册异常")
				}
			})
		} else {
			alert("账号密码格式错误，长度限制为12")
		}

	})
	// 获取Cookie值
	function getCookieValue(cookieName) {
		var cookieString = document.cookie;
		var cookies = cookieString.split("; ");

		for (var i = 0; i < cookies.length; i++) {
			var cookie = cookies[i].split("=");
			var name = cookie[0];
			var value = decodeURIComponent(cookie[1]);

			if (name === cookieName) {
				// 对密码进行解码
				if (cookieName === 'pwd') {
					return decodeURIComponent(value);
				} else {
					return value;
				}
			}
		}

		return "";
	}

	// 使用示例
	var cookieaccount = getCookieValue("account");
	var cookiepwd = getCookieValue("pwd");
	if(cookieaccount !=null && cookiepwd != null ){
		$("#acc").val(cookieaccount)
		$("#pwd").val(cookiepwd)
		$("#memorypwd").prop('checked', true); // 将复选框设置为选中状态
	}



	//登录
	$("#login").click(function() {
		var account = $("#acc").val();
		var pwd = $("#pwd").val();
		// 判断复选框的选中状态
		if ($("#memorypwd").prop('checked')) {
			var cookieString = "account=" + encodeURIComponent(account) + ";";
			// 设置Cookie
			var expires = new Date();
			expires.setTime(expires.getTime() + 7 * 24 * 60 * 60 * 1000); // 7天后过期
			cookieString += "expires=" + expires.toUTCString() + ";";
			document.cookie = cookieString;
			cookieString = "pwd=" + encodeURIComponent(pwd) + ";";
			cookieString += "expir怕，，吧v宝宝des=" + expires.toUTCString() + ";";
			document.cookie = cookieString;
		} else {
			// 删除account的Cookie
			document.cookie = "account=; expires=Thu, 01 Jan 1970 00:00:00 UTC;";
			// 删除pwd的Cookie
			document.cookie = "pwd=; expires=Thu, 01 Jan 1970 00:00:00 UTC;";

		}

		fetch('http://localhost:8080/user/admin/login', {
			method: 'POST',
			headers: {
				'Content-Type': 'application/json'
			},
			body: JSON.stringify({
				userAccount: account,
				userpwd:pwd
			})
		}).then(response => {
			if (!response.ok) {
				throw new Error('请求失败');
			}
			return response.json();
		}).then(data => {
			// 请求成功处理返回的数据
			if (data.code === 1) {
				sessionStorage.setItem('userKey', JSON.stringify(data.data))
				skip()
			}
		}).catch(error => {
			// 请求失败处理错误信息
			console.error(error);
		});

	})
	function skip(){
		window.location.href = "index.html";
	}
</script>
</html>
